<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./card.css">
    <script src="jquery.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="container">
        <h1>bilibili</h1>
        <form action="">
            <input class="tbx" type="text" placeholder="点赞">
            <input class="tbx" type="text" placeholder="投币">
            <input class="sub" type="submit" value="一键三连">
        </form>
    </div>
    <script>
        // 定义一个con绑定 .container
        const con = document.querySelector('.container');
        // 定义两个函数开关
        let isIn = true;    // 鼠标进入的门，默认打开
        let isOut = false;  // 鼠标离开的门，默认关闭

        var span;   // 给未出生的元素起名字


        function randomHexColor() { //随机生成十六进制颜色
            var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
            while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位
                hex = '0' + hex;
            }
            return '#' + hex; //返回‘#'开头16进制颜色
        }

        // 监听鼠标进去的事件+进去的方法
        con.addEventListener('mouseenter', (e) => {
            if (isIn) {//如果进入的时候门是打开的，执行函数

                // 获取进入的鼠标位置
                // 生成元素的位置=进入点距离窗口的距离-父盒子距离窗口的距离
                let inx = e.clientX - e.target.offsetLeft;
                let iny = e.clientY - e.target.offsetTop;

                // 创建一个span元素，并给它对应的出生坐标
                let el = document.createElement('span');
                el.style.left = inx + 'px';
                el.style.top = iny + 'px';
                con.appendChild(el); // 添加到con对应的父元素,即container

                // $('.in').style.background = randomHexColor();
                $('.container span').removeClass('out');
                $('.container span').addClass('in');
                span = document.querySelector('.container span');
                isIn = false; //关闭进来的门
                isOut = true; //打开出去的门

            }
        })

        // 监听鼠标出来的事件+方法
        con.addEventListener('mouseleave', (e) => {
            if (isOut) {
                // 获取出去的鼠标位置
                // 生成元素的位置=进入点距离窗口的距离-父盒子距离窗口的距离
                let inx = e.clientX - e.target.offsetLeft;
                let iny = e.clientY - e.target.offsetTop;


                $('.container span').removeClass('in');
                $('.container span').addClass('out');
                $('.out').css('left', inx + 'px'); // 添加出去的坐标
                $('.out').css('top', iny + 'px');

                isOut = false;//关闭出去的门

                // 动画结束后删除元素
                setTimeout(() => {
                    con.removeChild(span);
                    isIn = true;
                }, 500)
            }
        })
    </script>
</body>

</html>